<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="700px"
    @close="close"
  >
    <div slot="title" class="el-dialog__title">字段权限设置</div>
    <el-form :model="editForm" label-width="100px">
      <el-form-item label="菜单名称">
        <span class="font-bold">回款</span>
      </el-form-item>
      <el-form-item label="字段名称">
        <span class="font-bold">付款方式</span>
      </el-form-item>
      <el-form-item label="部门权限">
        <el-select v-model="editForm.deptId" filterable  @change="deptChange()">
          <el-option
            v-for="optionItem in deptList"
            :key="optionItem.id"
            :label="optionItem.name"
            :value="optionItem.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="付款方式" v-if="payList.length>0">
        <el-checkbox-group v-model="editForm.type">
          <el-checkbox :label="item.thirdId" name="type"  v-for="(item,index) in payList" :key="index">{{item.paymentDict}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="sureClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { depListAPI,endDepListAPI } from "@/api/common"; // 部门
import { paymentDeptBindList, paymentDeptBind} from '@/api/admin/crm'
export default {
  // 编辑角色
  name: "EditDeptBind",
  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      roleValue: [],
      editForm: {
        type: [],
        deptId: null,
      },
      deptList: [],
      payList: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getDepList();
    this.deptChange();
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
    async sureClick() {
        if(!this.editForm.deptId){
          this.$message.error('请选择部门')
          return
        }
        if(this.editForm.type.length<1){
          this.$message.error('请选择付款方式')
          return
        }
        let params = {
            deptId:this.editForm.deptId,
            type:this.editForm.type
        }
        const res = await paymentDeptBind(params)
        if(res && res.code == 0){
            this.$message({
              type: 'success',
              message: '设置成功'
            })
        }
    },
    getDepList() {
      endDepListAPI()
        .then((response) => {
          this.deptList = response.data;
        })
        .catch(() => {});
    },
    async deptChange(){
        let params = {
            deptId:this.editForm.deptId || 0
        }
        const res = await paymentDeptBindList(params)
        if(res && res.data){
            this.payList = res.data;
            this.editForm.type = [];
            this.payList.forEach((it,i)=>{
                if(it.check){
                    this.editForm.type.push(it.thirdId)
                }
            })
        }
    }
  },
};
</script>
<style lang="scss" scoped>
.font-bold {
  font-weight: bold;
}
// .el-form {
//   margin-top: 10px;
//   /deep/ .el-form-item__label {
//     line-height: 30px;
//     padding-bottom: 0;
//   }
// }
</style>
